<script>
import index from '@/api/index.js'
import { quillEditor } from 'vue-quill-editor'
import "quill/dist/quill.core.css"; // import styles
import "quill/dist/quill.snow.css"; // for snow theme
import "quill/dist/quill.bubble.css"; // for bubble theme
export default {
  components:{
    quillEditor,
  }
  ,data(){
    return{
      question:"",
      tryDo:"",
      title:"",
      tags:[

      ],
      currentTag:''

    }
  },
  methods:{
    toPath(path) {
      // console.log(item)
      //   防止重复跳转路由
      if (this.$route.path !== path && !(this.$route.path === '/index' && (path === '/'))) {
        this.$router.push(path)
      }
    },
    addTag(){
      this.tags.push({'tagTitle': this.currentTag.toUpperCase()})
    },
    sendPost(){
      index.login()
          .then((res)=>{
            if (res.data.code === 200){
              index.sendPost(this.title,this.question,this.tryDo,this.tags).then(
                  (res)=>{
                    if (res.data.code === 401) {
                      this.toPath('/login')
                    } else if (res.data.code === 200) {
                      console.log('发帖成功' + res.data)
                      alert("发帖成功")
                    } else {
                      alert("未知错误")
                    }
                  }
              )
            }else {
              this.toPath('/login')
            }
      })
    }
  }
}

</script>

<template>
  <div class="root-container">

    <div class="main-container">
      <!-- 主要内容左侧问答区 -->
      <div class="main-content">
        <h1>提问题</h1>
        <h5>请详细描述你的问题</h5>
        <div id="main-question">
          <quill-editor v-model="question"></quill-editor>
        </div>
        <p>包括但不限于代码、错误信息等（请勿上传代码的截图，截图无法调试）</p>
        <h1></h1>
        <h3 class="for-title">你做过哪些尝试，希望获得什么样的结果？</h3>
        <div id="question-for-what">
          <quill-editor v-model="tryDo" :height="200"></quill-editor>
        </div>
        <div>描述你做过的尝试，你期望的结果，实际得到的结果。</div>
        <h1></h1>
        <div class="send-post-title for-title">
          <h3>标题:</h3>
          <h3></h3>
          <input type="text" id="post-title" style="background-color: #fff;: white;"
                 placeholder="请输入标题" v-model="title"/>
        </div>
        <h3></h3>
        <div class="tag for-title">
          <h3>标签:</h3>
          <ul id="tag-list">
            <li v-for="(item,index) in tags" :key="index" >{{item}}</li>
          </ul>
        </div>
        <div class="down-menu">
          <input v-model="currentTag" class="input-css" id="tag-input" placeholder="请输入标签名" type="text" />
          <button class="button-css" type="button" @click="addTag">添加标签</button>
        </div>
        <button id="send-post" @click="sendPost">发帖</button>
      </div>


    </div>

  </div>
</template>

<style>

.ql-container {
  height: 380px;
}
#main-question,
#question-for-what {
  width: 100%;
  height: 300px;
  /* background-color: gray; */
  border-radius: 10px;
  margin: 10px 0;
}


.main-content {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;

  padding-right: 20px;
  flex-grow: 1;
}



#send-post {
  font-size: 20px;
  line-height: 40px;
  border-radius: 14px;
  border: none;
  background-color: #008050;
  color: white;
  font-weight: 700;
  width: 100px;
  cursor: pointer;

}


#post-title {
  font-size: 20px;
  border: 1px solid #cecece;
  border-radius: 5px;
  width: 100%;
  box-sizing: border-box;

  /* margin: 0 10px; */
  padding: 10px;
  transition: 0.3s;
}

#post-title:focus {
  box-shadow: 0 0 5px 1px #008050;
}

#tag-list {

  margin-left: 0px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

}




.button-css {
  border: none;
  background-color: #008050;
  padding: 10px;
  margin: 5px;
  color: white;
  cursor: pointer;
}

.input-css {
  border: 1px solid #cecece;
  padding: 10px;
  margin: 5px;


}

.input-css:focus {
  border: 1px solid #cecece;
}

#main-question,
#question-for-what {
  height: 440px;
}

.for-title{
  margin-top: 30px;
}

/*
#tag-list :first-child {
	margin-left: 0px;

} */





.tag-item {
  padding: 10px 0px;
  color: black;
  border: 1px solid #cecece;
  cursor: pointer;

  flex-grow: 1;
  text-align: center;
  background-color: #fff;
  color: black;

  margin-right: 10px;

}

.tag-item:hover {
  padding: 10px 0px;
  color: white;
  background-color: #515151;
  border: 1px solid #515151;
}


#tag-input {
  margin: 0px;
  background-color: #fff;
}

#send-post{
  margin: 40px 0;
}
</style>